<template>
  <div class="login">
    <!-- 文字 -->
    <div class="left">
      <h2>进销存管理系统</h2>
    </div>
    <!-- 登录列表 -->
    <div class="right">
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-col :span="16"
            ><div class="grid-content bg-purple" style="margin-right: 15px">
              <el-input
                v-model="loginForm.captcha"
                placeholder="验证码"
              ></el-input></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple" @click="exImg()">
              <img :src="imgPath" alt="" /></div
          ></el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('loginForm')"
            style="width: 360px"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { uuid } from 'vue-uuid';
export default {
  data() {
    return {
      imgPath: "",
      loginForm: {
        username: "admin",
        password: "123456",
        captcha: "",
        remember_me: "flase",
        checkKey: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    exImg() {
      this.getcaptcha();
    },
    //获取验证码
    async getcaptcha() {
      this.loginForm.checkKey = new Date().getTime(); //时间戳
      let T = new Date().getTime() / 1000;
      const { data: res } = await this.axios.get(
        `http://8.142.74.15:48082/jeecg-boot/sys/randomImage/${this.loginForm.checkKey}`,
        {
          params: { _t: T },
          responseType: "json",
        }
      );
      this.imgPath = res.result;
    },

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (!valid) return this.$message.error("请填写正确表单信息");
          const { data: res } = await this.axios.post(
            "http://8.142.74.15:48082/jeecg-boot/sys/login",
            this.loginForm
          );
          console.log(res);
          this.$message.success("登陆成功");
          sessionStorage.token = res.result.token;
          sessionStorage.username = this.loginForm.username;
          sessionStorage.password = this.loginForm.password;
          this.$router.push("/home");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.getcaptcha();
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 460px;
  padding: 110px 0 114px;
  margin: 0 auto;
  .left {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    h2 {
      font-size: 30px;
      font-weight: 600;
      margin-left: 20px;
    }
  }
  .right {
  }
}
</style>
